
import 'package:common_utils/common_utils.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:yp/router.dart';
import 'package:get/get.dart';
import 'package:yp/helper.dart';

import 'logic.dart';
import 'state.dart';

class ApplyKocPage extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _ApplyKocPage();
  }
}

class _ApplyKocPage extends State<ApplyKocPage> {
  final ApplyKocLogic logic = Get.put(ApplyKocLogic());
  final ApplyKocState state = Get.find<ApplyKocLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        centerTitle: true,
        elevation: setWidth(1),
        title: Text(
          '注册',
          style: TextStyle(
            color: Color(0xff222222),
            fontSize: 17,
          ),
        ),
        iconTheme: IconThemeData(
          color: Color(0xff222222),
        ),

      ),
      body: GetBuilder<ApplyKocLogic>(
        builder: (logic) {
          return ListView(
            padding: EdgeInsets.zero,
            children: [
              Container(
                color: Colors.white,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 姓名
                    Container(
                      height: setWidth(88),
                      padding: EdgeInsets.symmetric(horizontal: setWidth(50)),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Container(
                            width: setWidth(156),
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '姓名',
                              style: TextStyle(
                                color: Color(0xff333333),
                                fontSize: 13,
                              ),
                            ),
                          ),
                          Expanded(
                            child: Container(
                              child: TextField(
                                controller: state.nameTextController,
                                style: TextStyle(
                                  color: Color(0xff222222),
                                  fontSize: 13,
                                ),
                                onChanged: (value) {
                                  logic.textControllerClick();
                                },
                                maxLines: 1,
                                decoration: InputDecoration(
                                  contentPadding: EdgeInsets.zero,
                                  hintText: '请输入姓名',
                                  hintStyle: TextStyle(
                                    color: Color(0xffcccccc),
                                    fontSize: 13,
                                  ),
                                  enabledBorder: OutlineInputBorder( // 设置输入框可编辑时的边框样式
                                    borderRadius: BorderRadius.all(Radius.circular(0)),  // 设置边框四个角的弧度
                                    borderSide: BorderSide(  // 用来配置边框的样式
                                      color: Colors.transparent,  // 设置边框的颜色
                                      width: setWidth(1),  // 设置边框的粗细
                                    ),
                                  ),
                                  focusedBorder: OutlineInputBorder(  // 用来配置输入框获取焦点时的颜色
                                    borderRadius: BorderRadius.all(Radius.circular(0)),  // 设置边框四个角的弧度
                                    borderSide: BorderSide(  // 用来配置边框的样式
                                      color: Colors.transparent,  // 设置边框的颜色
                                      width: setWidth(1),  // 设置边框的粗细
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Divider(
                      height: setWidth(1),
                      color: Color(0xffEEEEEE),
                      indent: setWidth(38),
                      endIndent: 0,
                    ),
                    // 手机号
                    Container(
                      height: setWidth(88),
                      padding: EdgeInsets.symmetric(horizontal: setWidth(50)),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Container(
                            width: setWidth(156),
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '手机号',
                              style: TextStyle(
                                color: Color(0xff333333),
                                fontSize: 13,
                              ),
                            ),
                          ),
                          Expanded(
                            child: Container(
                              child: TextField(
                                controller: state.phoneTextController,
                                style: TextStyle(
                                  color: Color(0xff222222),
                                  fontSize: 13,
                                ),
                                onChanged: (value) {
                                  logic.textControllerClick();
                                },
                                maxLines: 1,
                                decoration: InputDecoration(
                                  contentPadding: EdgeInsets.zero,
                                  hintText: '请输入手机号',
                                  hintStyle: TextStyle(
                                    color: Color(0xffcccccc),
                                    fontSize: 13,
                                  ),
                                  enabledBorder: OutlineInputBorder( // 设置输入框可编辑时的边框样式
                                    borderRadius: BorderRadius.all(Radius.circular(0)),  // 设置边框四个角的弧度
                                    borderSide: BorderSide(  // 用来配置边框的样式
                                      color: Colors.transparent,  // 设置边框的颜色
                                      width: setWidth(1),  // 设置边框的粗细
                                    ),
                                  ),
                                  focusedBorder: OutlineInputBorder(  // 用来配置输入框获取焦点时的颜色
                                    borderRadius: BorderRadius.all(Radius.circular(0)),  // 设置边框四个角的弧度
                                    borderSide: BorderSide(  // 用来配置边框的样式
                                      color: Colors.transparent,  // 设置边框的颜色
                                      width: setWidth(1),  // 设置边框的粗细
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Divider(
                      height: setWidth(1),
                      color: Color(0xffEEEEEE),
                      indent: setWidth(38),
                      endIndent: 0,
                    ),
                    Container(
                      height: setWidth(88),
                      padding: EdgeInsets.symmetric(horizontal: setWidth(50)),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Row(
                            children: [
                              Container(
                                width: setWidth(156),
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  "验证码",
                                  style: TextStyle(
                                    color: Color(0xff333333),
                                    fontSize: 13,
                                  ),
                                ),
                              ),
                              Container(
                                width: 100,
                                child: TextField(
                                  controller: state.verifyTextController,
                                  textAlignVertical: TextAlignVertical.center,
                                  onChanged: (value) {
                                    logic.textControllerClick();
                                  },
                                  decoration: InputDecoration(
                                    isDense: true,
                                    hintText: '请输入验证码',
                                    hintStyle: TextStyle(
                                      fontSize: 13,
                                      color: Color(0xffcccccc),
                                    ),
                                    border: InputBorder.none,
                                  ),
                                ),
                              ),
                            ],
                          ),
                          GestureDetector(
                            onTap: () {
                              print('++++++++++++++++++ 获取验证码点击事件 ++++++++++++++++++');
                              if (logic.state.seconds > 0 && logic.state.seconds < 60) {
                                return;
                              }
                              if (!RegexUtil.isMobileSimple(state.phoneTextController.text)) {
                                toast("手机号格式错误");
                                return;
                              }
                              logic.getVerifyCode();
                            },
                            child: Container(
                              height: 36,
                              width: 100,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(setWidth(10)),
                                border: Border.all(
                                  width: setWidth(1),
                                  color: Color(0xffe1e1e1),
                                ),
                              ),
                              child: Center(
                                child: Text(
                                  state.verifyStr,
                                  style: TextStyle(
                                    color: Color(0xff717171),
                                    fontSize: 13,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Divider(
                      height: setWidth(1),
                      color: Color(0xffEEEEEE),
                      indent: setWidth(38),
                      endIndent: 0,
                    ),
                    // 邀请人手机号
                    Container(
                      height: setWidth(88),
                      padding: EdgeInsets.symmetric(horizontal: setWidth(50)),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Container(
                            width: setWidth(156),
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '邀请人手机号',
                              style: TextStyle(
                                color: Color(0xff333333),
                                fontSize: 13,
                              ),
                            ),
                          ),
                          Expanded(
                            child: Container(
                              child: TextField(
                                controller: state.invitePhoneTextController,
                                style: TextStyle(
                                  color: Color(0xff222222),
                                  fontSize: 13,
                                ),
                                maxLines: 1,
                                decoration: InputDecoration(
                                  contentPadding: EdgeInsets.zero,
                                  hintText: '请输入邀请人手机号(选填)',
                                  hintStyle: TextStyle(
                                    color: Color(0xffcccccc),
                                    fontSize: 13,
                                  ),
                                  enabledBorder: OutlineInputBorder( // 设置输入框可编辑时的边框样式
                                    borderRadius: BorderRadius.all(Radius.circular(0)),  // 设置边框四个角的弧度
                                    borderSide: BorderSide(  // 用来配置边框的样式
                                      color: Colors.transparent,  // 设置边框的颜色
                                      width: setWidth(1),  // 设置边框的粗细
                                    ),
                                  ),
                                  focusedBorder: OutlineInputBorder(  // 用来配置输入框获取焦点时的颜色
                                    borderRadius: BorderRadius.all(Radius.circular(0)),  // 设置边框四个角的弧度
                                    borderSide: BorderSide(  // 用来配置边框的样式
                                      color: Colors.transparent,  // 设置边框的颜色
                                      width: setWidth(1),  // 设置边框的粗细
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Divider(
                      height: setWidth(1),
                      color: Color(0xffEEEEEE),
                      indent: setWidth(38),
                      endIndent: 0,
                    ),
                  ],
                ),
              ),
              // 隐私协议 用户协议
              Padding(
                padding: const EdgeInsets.only(left: 25),
                child: Row(
                  children: [
                    GestureDetector(
                      onTap: () {
                        logic.choosePrivacyAgreement(!state.choosePrivacyAgreement);
                      },
                      behavior: HitTestBehavior.opaque,
                      child: Container(
                        height: setWidth(76),
                        alignment: Alignment.centerLeft,
                        child: Image.asset(
                          state.choosePrivacyAgreement ? 'assets/images/ok@2x.png' : 'assets/images/save.png',
                          width: setWidth(28),
                          height: setWidth(28),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 8.0),
                      child: Text.rich(
                        TextSpan(
                          children: [
                            TextSpan(
                              text: '我已阅读并同意',
                              style: TextStyle(
                                color: Color(0xff666666),
                                fontSize: 12,
                              ),
                            ),
                            TextSpan(
                              text: '《慧达人注册协议》',
                              style: TextStyle(
                                color: Color(0xffEA5504),
                                fontSize: 12,
                              ),
                              recognizer: TapGestureRecognizer()
                                ..onTap = () {
                                  Get.toNamed(RouteConfig.webview, arguments: {
                                    "url":"https://img.zrhsh.com/zrhshgg/treaty/yszc-hxk.html",
                                  });
                                },
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                height: setWidth(120),
                padding: EdgeInsets.only(
                  left: setWidth(50),
                  top: setWidth(20),
                  right: setWidth(50),
                  bottom: setWidth(22),
                ),
                child: InkWell(
                  onTap: () {
                    print('点击下一步');
                    logic.onSubmit();
                  },
                  child: Container(
                    height: setWidth(80),
                    decoration: BoxDecoration(
                      color: Color(0xffEA5504),
                      borderRadius: BorderRadius.circular(setWidth(40)),
                    ),
                    alignment: Alignment.center,
                    child: Text(
                      '下一步',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 17,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          );
        },
      ),
    );
  }

  @override
  void dispose() {
    Get.delete<ApplyKocPage>();
    super.dispose();
  }
}